i<!DOCTYPE html> 
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Mi primera página</title> 
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
    <link rel="stylesheet" type="text/css" href="themes/themes.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>    
    <script type="text/javascript">
    
    function logear(){
    	    	
    	var nombredeusuario = $("#nombredeusuario").val();
    	var clave = $("#clave").val();
    	
    	console.log("aquiiiii pámela");
    	
    	$.post("http://192.168.1.119/appMunicipalidad/MunicipalidadREST/login_REST.php",
    			{dni: nombredeusuario, password: clave}, function(data){
    		
    		console.log("aqui pámela 2");
    		
    		if ( data.status == "OK") {
    			alert("Correcto");
    			window.location.assign("colabora.html");
    		} else {
    			alert("Incorrecto");
    		}
    		
    	}, "json");
    	
    }

  
  
</script>
</head> 
 
<body> 
 
<div id="pagina" data-role="page">
 
    <div data-role="header" data-position="fixed">
        <h1>Autenticación</h1>
    </div><!-- /header -->
 
    <div data-role="content" > 
       <form id="formulario" >
      
      			<label> Usuario </label>
      			<input type="text" id="nombredeusuario" name="nombredeusuario" placeholder="Introduce tu usuario">
      
      			<label> Password </label>
     			<input type="password" id="clave" name="clave" placeholder="Introduce tu password" >
 
      			<input type="button" value="Login" id="botonLogin" data-icon="check" onclick="logear()">
      
    		</form>		    
    </div><!-- /content -->
     
    <div data-role="footer" data-position="fixed" data-theme="a">
        <h4> developersJRP &copy; 2013</h4>
    </div><!-- /footer -->
     
</div>
<!-- /page -->

<script>
 
$('#formulario').submit(function() { 
	
	 
	// recolecta los valores que inserto el usuario
	var datosUsuario = $("#nombredeusuario").val()
	var datosPassword = $("#clave").val()
	
  	archivoValidacion = "http://revolucion.mobi/ejemplos/phonegap/envioFormulario/validacion_de_datos.php?jsoncallback=?"
 
	$.getJSON( archivoValidacion, { usuario:datosUsuario ,password:datosPassword})
	.done(function(respuestaServer) {
		
		alert(respuestaServer.mensaje + "\nGenerado en: " + respuestaServer.hora + "\n" +respuestaServer.generador)
		
		if(respuestaServer.validacion == "ok"){
		  
		 	/// si la validacion es correcta, muestra la pantalla "home"
			$.mobile.changePage("#home")
		  
		}else{
		  
		  /// ejecutar una conducta cuando la validacion falla
		}
  
	})
	return false;
})
	
</script>
</body>
</html>